<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小区管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin layui-col-xs12 layui-col-sm12 layui-col-md12">
    <!-- 顶部菜单 -->
    <div class="layui-header">
        <div class="layui-logo">
            <a href="#" style="color: #009688;font-weight: bold;">layui 后台布局</a>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left layui-nav-itemed">
            <li class="layui-nav-item"><a th:href="@{/}">首页</a></li>
            <li class="layui-nav-item layui-this">
                <a href="javascript:;">易收系统</a>
            </li>
        </ul>
    </div>
    <!-- 侧边菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">易收系统</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="#">小区管理</a></dd>
                        <dd><a th:href="@{/system/building/toBuildingList}">楼栋管理</a></dd>
                        <dd><a th:href="@{/system/user/toUserList}">已入驻业主管理</a></dd>
                        <dd><a th:href="@{/system/owner/toOwnerList}">未入驻业主管理</a></dd>
                        <dd><a th:href="@{/system/order/toOrderList}">订单管理</a></dd>
                        <dd><a th:href="@{/system/employee/toEmployeeList}">员工管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="layui-body" style="margin-left: 30px;margin-right: 30px;">
        <!-- 小区列表 -->
        <div style="margin-top: 20px;margin-bottom: 10px;">
            <h1 align="center" style="font-weight: bold;">小区列表</h1>
        </div>

        <!-- 查询框开始 -->
        <div style="margin-right: 20px;margin-top: 20px;">
            <form class="layui-form">
                <!-- 小区名称 -->
                <div class="layui-input-inline" style="margin-left: 20px;">
                    <input type="text" name="communityName" id="communityName" placeholder="请输入小区名称" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 小区联系方式 -->
                <div class="layui-input-inline" style="margin-left: 10px;">
                    <input type="text" name="communityPhone" id="communityPhone" placeholder="请输入小区联系方式"
                           autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 地址 -->
                <div class="layui-input-inline" style="margin-left: 10px;margin-right: 10px;">
                    <input type="text" name="detailedAddress" id="detailedAddress" placeholder="请输入小区详细地址"
                           autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 查询和添加按钮 -->
                <a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSearch">查询</a>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                <a style="float: right;" class="layui-btn layui-btn-sm" id="doAdd">添加</a>
            </form>
        </div>
        <!-- 查询框结束 -->

        <!-- 表格框开始 -->
        <div style="margin-top: 20px;">
            <table class="layui-hide" id="communities" lay-filter="communityTable"></table>
            <div id="barDemo" style="display: none;">
                <a class="layui-btn layui-btn-xs" lay-event="editCommunityById">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteCommunityById">删除</a>
            </div>
        </div>
        <!-- 表格框结束 -->

        <!-- 添加商家的弹出层 -->
        <div id="addCommunityDiv" style="display: none;padding: 20px;">
            <form class="layui-form layui-form-pane" style="margin-top: 20px;">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>上传小区信息</legend>
                </fieldset>
                <!--小区名称与联系方式-->
                <div class="layui-form-item" style="margin-left: 30px;margin-top: 30px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">小区名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="communityName" id="a_communityName" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-inline">
                            <input type="text" name="communityPhone" id="a_communityPhone" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--区域地址与详细地址-->
                <div class="layui-form-item" style="margin-left: 30px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">区域地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="areaAddress" id="a_areaAddress" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="detailedAddress" id="a_detailedAddress" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--经纬度-->
                <div class="layui-form-item" style="margin-left: 30px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">经度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="longitude" id="a_longitude" lay-verify="required|number"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">纬度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="latitude" id="a_latitude" lay-verify="required|number"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--&lt;!&ndash; 商家外观 &ndash;&gt;
                <label class="layui-form-label">商家外观</label>-->
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;">
                    <legend>上传商家图片</legend>
                </fieldset>

                <div class="layui-upload" style="margin: 30px;">
                    <!-- 这个隐藏域是为了添加图片路径 -->
                    <input type="hidden" name="communityPic" id="a_communityPicInput" value="" lay-verify="">
                    <button type="button" class="layui-btn layui-btn-sm" id="bindViewPic">多图片上传预览</button>
                    <div class="layui-inline layui-word-aux">
                        (最多上传四张图片,双击预览图片可删除,已上传图片请勿重复提交)
                    </div>
                    <button style="float: right;" type="button" class="layui-btn layui-btn-sm" id="bindAddPic">确定上传
                    </button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 20px;min-height: 150px;">
                        预览图：
                        <!-- 这个div是为了清空旧的节点 -->
                        <div class="layui-upload-list" id="forRemoveNode"></div>
                        <!-- 这个div是为了上传图片的节点 -->
                        <div class="layui-upload-list" id="forUploadNode"></div>
                    </blockquote>
                </div>
                <!-- 提交和重置按钮 -->
                <div class="layui-form-item" style="margin-top: 20px;margin-left: 210px;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSubmit">提交
                        </button>
                        <button type="reset" id="reloadFrame" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 添加商家的弹出层结束 -->

        <!-- 修改商家的弹出层 -->
        <div id="editCommunityDiv" style="display: none;padding: 20px;">
            <form class="layui-form" style="margin-top: 20px;" lay-filter="formData">
                <input type="hidden" lay-verify="required" name="communityId" id="edit_communityId" autocomplete="off">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>修改小区信息</legend>
                </fieldset>
                <!--小区名称与联系方式-->
                <div class="layui-form-item" style="margin-left: 30px;margin-top: 30px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">小区名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="communityName" id="e_communityName" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-inline">
                            <input type="text" name="communityPhone" id="e_communityPhone" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--区域地址与详细地址-->
                <div class="layui-form-item" style="margin-left: 30px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">区域地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="areaAddress" id="e_areaAddress" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="detailedAddress" id="e_detailedAddress" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--经纬度-->
                <div class="layui-form-item" style="margin-left: 30px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">经度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="longitude" id="e_longitude" lay-verify="required|number"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">纬度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="latitude" id="e_latitude" lay-verify="required|number"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;">
                    <legend>修改商家图片</legend>
                </fieldset>

                <div class="layui-upload" style="margin: 30px;">
                    <!-- 这个隐藏域是为了添加图片路径 -->
                    <input type="hidden" name="communityPic" id="e_communityPicInput" value="" lay-verify="">
                    <button type="button" class="layui-btn layui-btn-sm" id="e_bindViewPic">多图片上传预览</button>
                    <div class="layui-inline layui-word-aux">
                        (最多上传四张图片,双击预览图片可删除,已上传图片请勿重复提交)
                    </div>
                    <button style="float: right;" type="button" class="layui-btn layui-btn-sm" id="bindEditPic">确定上传
                    </button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 20px;min-height: 150px;">
                        <!--这个span是为了展示原有的商家图片-->
                        <span class="layui-upload-list" id="displayPics"></span>
                        <!--这个span是为了展示新增上传前的商家图片-->
                        <span class="layui-upload-list" id="beforeUploadPics"></span>
                        <!--这个span是为了展示新增上传后的商家图片-->
                        <span class="layui-upload-list" id="afterUploadPics"></span>
                    </blockquote>
                </div>
                <!-- 修改和重置按钮 -->
                <div class="layui-form-item" style="margin-top: 20px;margin-left: 190px;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="editSubmit">修改
                        </button>
                        <button type="reset" id="reloadMessage" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 修改商家的弹出层结束 -->
        <!-- 主体内容结束 -->
    </div>
</div>

<!-- 用户列表结束 -->
<!-- 以下是layui函数代码块 -->
<script type="application/javascript" th:src="@{/js/layui/layui.js}"></script>
<!-- 导入用户列表的js文件 -->
<script type="application/javascript" th:src="@{/js/layui/sys_community.js}"></script>
</body>
</html>